<template>
	<view class="comfirm-page">
		<view class="cart-list">
			<view class="cart-title">
				商品详情
			</view>
			<view style="padding-bottom: 20rpx;	border-bottom: 1px solid #f0f0f5;margin-bottom: 20rpx;">
				<view class="cart-item" v-for="item in cartList" :key="item.id">
					<view class="goods-img">
						<image :src="item.imgurl" mode=""></image>
					</view>
					<view class="goods-info">
						<view class="name">
							<text>{{item.name}}</text>
							<text class="groupdetail">{{item.groupdetail}}</text>
						</view>

						<view class="price">
							<view :class="!isShow(item)?'item source':'item sale'">
								<text><text>￥{{item.retailPrice}}</text>
									x{{item.count}}</text>
							</view>
							<view class="item" v-if="isShow(item)"><text><text
										style="color: red;">会员价￥{{getMemberPrice(item)}}</text>
									x{{item.count}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="ticket-tips-info">
				<u-icon name="close" />
				<text>商品不支持退换</text>
			</view>
		</view>
		<pay-mode @changePolicy='changePolicy'></pay-mode>
	</view>
</template>

<script>
	import payMode from '../../components/goodsOrderComfirm/payMode.vue'
	export default {
		components: {
			payMode
		},
		data() {
			return {
				cartList: [],
				policy: '',
			};
		},
		methods: {
			changePolicy(policy) {
				this.policy = policy
				this.cartList = this.cartList.slice()
			}
		},
		onLoad() {
			this.cartList = this.$store.state.goodsList
		},
		computed: {
			getMemberPrice() {
				return item => {
					var goodsPrice = 0

					if (item.memberPrice) {
						item.memberPrice.find(price => {
							if (price.policyId == this.policy) {
								if (price.memberPrice) {
									goodsPrice = price.memberPrice
								} else if (price.goodDiscount) {
									goodsPrice = (price.goodDiscount * item.retailPrice).toFixed(
										2)
								}
							}
						})
					} else {
						goodsPrice = item.retailPrice
					}

					return goodsPrice
				}
			},
			isShow() {
				return item => {
					let value = false
					if (item.memberPrice) {
						item.memberPrice.find(price => {
							if (price.policyId == this.policy) {
								value = true
							}
						})
					}
					return value
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.comfirm-page {
		background-color: #f0f0f5;
		min-height: 100vh;
		padding-top: 20rpx;
		padding-bottom: 260rpx;
		box-sizing: border-box;

		.ticket-tips-info {
			font-size: 26rpx;
			color: royalblue;
			margin: 0 15rpx 10rpx 15rpx;
			display: flex;
		}

		.cart-list {
			background-color: #fff;
			width: 95vw;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			margin: 0 auto 20rpx auto;
			border-radius: 20rpx;

			.cart-title {
				padding-bottom: 10rpx;
				border-bottom: 1px solid #f0f0f5;
			}

			.cart-item {
				display: flex;
				margin: 10rpx 0;

				.goods-img {
					margin-right: 15rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.goods-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 26rpx;
					color: #999;
					width: 100%;

					.name {
						font-weight: bold;
						font-size: 34rpx;
						color: #000;
						display: flex;
						flex-direction: column;

						.groupdetail {
							font-size: 26rpx;
							color: #999;
							margin-top: 20rpx;
							font-weight: normal;
						}
					}

					.price {


						.item {
							display: flex;
							justify-content: flex-end;
						}

						.source {
							color: royalblue;
						}

						.sale {
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}

		}
	}
</style>